<template>
    <div class="form-content-title">基本信息</div>
    <a-form :label-col="labelCol" :wrapper-col="wrapperCol" :model="modelRef">
        <a-row :gutter="24">
            <a-col :span="12">
                <a-form-item label="需求单编号" name="demandOrderCode" v-bind="validateInfos.demandOrderCode">
                    <a-input v-model:value="modelRef.demandOrderCode" placeholder="请输入需求单编号" readonly />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="提报单位" name="reportingUnit" v-bind="validateInfos.reportingUnit">
                    <a-select v-model:value="modelRef.reportingUnit" :options="reportingUnitOptions" placeholder="请选择提报单位" allowClear />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="接收平台公司" name="platformCompony" v-bind="validateInfos.platformCompony">
                    <a-select v-model:value="modelRef.platformCompony" :options="platformComponyOptions" placeholder="请选择平台公司" allowClear />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="需求类型" name="demandOrderType" v-bind="validateInfos.demandOrderType">
                    <a-select v-model:value="modelRef.demandOrderType" :options="demandOrderTypeOptions" placeholder="请选择需求类型" allowClear />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="提报人" name="reportingUserName" v-bind="validateInfos.reportingUserName">
                    <a-input v-model:value="modelRef.reportingUserName" placeholder="请输入提报人" allowClear />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="联系方式" name="reportingUserTel" v-bind="validateInfos.reportingUserTel">
                    <a-input v-model:value="modelRef.reportingUserTel" placeholder="请输入提报人联系方式" allowClear />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="关联项目" name="relatedProject" v-bind="validateInfos.relatedProject">
                    <a-select v-model:value="modelRef.relatedProject" :options="relatedProjectOptions" placeholder="请选择关联项目" allowClear />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="备注" name="demandRemark" v-bind="validateInfos.demandRemark">
                    <a-textarea v-model:value="modelRef.demandRemark" placeholder="请输入备注"></a-textarea>
                </a-form-item>
            </a-col>
        </a-row>
        
        <!-- 解决类型不匹配问题，使用Number()转换确保比较正确 -->
        <div v-if="Number(modelRef.demandOrderType) === 0">
            <div class="form-content-title">劳务需求信息</div>
            <a-table
                :columns="laborDemandColumns"
                :data-source="modelRef.laborDemands"
                row-key="key"
                bordered
                :pagination="false"
                class="dynamic-table"
            >
                <template #bodyCell="{ column, record, index }">
                    <template v-if="column.dataIndex === 'jobCategory'">
                        <a-select v-model:value="record.jobCategory" placeholder="请选择工种" allowClear>
                            <a-select-option v-for="(item, index) in jobType" :value="item.value" :key="index">{{ item.text }}</a-select-option>
                        </a-select>
                    </template>
                    <template v-else-if="column.dataIndex === 'number'">
                        <a-input-number placeholder="请输入数量" v-model:value="record.number" style="width: 100%" />
                    </template>
                    <template v-else-if="column.dataIndex === 'peopleName'">
                        <a-input v-model:value="record.peopleName" placeholder="请输入名称" allowClear />
                    </template>
                    <template v-else-if="column.dataIndex === 'landSsupply'">
                        <a-select v-model:value="record.landSsupply" placeholder="请选择">
                            <a-select-option value="部分供地">部分供地</a-select-option>
                            <a-select-option value="全部供地">全部供地</a-select-option>
                        </a-select>
                    </template>
                    <template v-else-if="column.dataIndex === 'unsuppliedArea'">
                        <a-input v-model:value="record.unsuppliedArea" placeholder="请输入未供地面积" allowClear />
                    </template>
                    <template v-else-if="column.dataIndex === 'beginTime'">
                        <a-input v-model:value="record.beginTime" placeholder="请选择起始时间" />
                    </template>
                    <template v-else-if="column.dataIndex === 'endTime'">
                        <a-input v-model:value="record.endTime" placeholder="请选择结束时间" />
                    </template>
                    <template v-else-if="column.dataIndex === 'compensation'">
                        <a-input placeholder="请输入薪酬" v-model:value="record.compensation" style="width: 100%" />
                    </template>
                    <template v-else-if="column.dataIndex === 'remarks'">
                        <a-input v-model:value="record.remarks" placeholder="请输入备注" allowClear />
                    </template>
                    <template v-else-if="column.dataIndex === 'action'">
                        <a-button
                            v-if="modelRef.laborDemands.length > 1"
                            type="text"
                            danger
                            @click="removeLaborDemand(index)"
                        >
                            <template #icon><DeleteOutlined style="color: red;"/></template>
                        </a-button>
                    </template>
                </template>
            </a-table>
            <a-button
                type="dashed"
                style="width: 100%; margin-top: 16px"
                @click="addLaborDemand"
            >
                <template #icon><PlusOutlined /></template>
                添加劳务需求
            </a-button>
        </div>
        <div v-else-if="Number(modelRef.demandOrderType) === 1">
            <div class="form-content-title">设备需求信息</div>
            <a-row :gutter="24">
                <a-col :span="12">
                    <a-form-item label="设备需求名称" name="deviceName" v-bind="validateInfos.deviceName">
                        <a-input v-model:value="modelRef.deviceName" placeholder="请输入设备需求名称" allowClear />
                    </a-form-item>
                </a-col>
            </a-row>
        </div>
    </a-form>
</template>
<script setup lang="ts">
import { ref, reactive, toRaw } from 'vue';
import { storeToRefs } from 'pinia';
import { Form } from 'ant-design-vue';
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { useUserStore } from '@/store/modules/user';

const user = storeToRefs(useUserStore());
const dictItemsRef = toRaw(user.dictItems);
const jobType = dictItemsRef?.value?.Job_type || [];

const useForm = Form.useForm;

// 表单布局配置
const labelCol = { span: 6 };
const wrapperCol = { span: 18 };

// 选项数据
const reportingUnitOptions = ref([
    {
        label: '单位1',
        value: '单位1'
    },
    {
        label: '单位2',
        value: '单位2'
    }
])

const platformComponyOptions = ref([
    {
        label: '平台1',
        value: '平台1'
    },
    {
        label: '平台2',
        value: '平台2'
    }
])

const demandOrderTypeOptions = ref([
    {
        label: '劳务需求',
        value: 0
    },
    {
        label: '设备需求',
        value: 1
    }
])

const relatedProjectOptions = ref([
    {
        label: '项目1',
        value: '项目1'
    },
    {
        label: '项目2',
        value: '项目2'
    }
])

// 表单数据模型
const modelRef = reactive({
    demandOrderCode: null, // 需求单编号
    reportingUnit: null, // 提报单位
    platformCompony: null, // 接收平台公司
    demandOrderType: 0, // 需求类型
    reportingUserName: null, // 提报人
    reportingUserTel: null, // 提报人联系方式
    relatedProject: null, // 关联项目
    demandRemark: null, // 备注
    demandName: null, // 劳务需求名称
    deviceName: null, // 设备需求名称
    laborDemands: [] // 劳务需求列表
})

// 表单验证规则
const rulesRef = reactive({
    demandOrderCode: [{ required: true, message: '请输入需求单编号' }],
    reportingUnit: [{ required: true, message: '请选择提报单位' }],
    platformCompony: [{ required: true, message: '请选择平台公司' }],
    demandOrderType: [{ required: true, message: '请选择需求类型' }],
    reportingUserName: [{ required: true, message: '请输入提报人' }],
    reportingUserTel: [{ required: true, message: '请输入提报人联系方式' }],
    relatedProject: [{ required: true, message: '请选择关联项目' }]
})

// 劳务需求表格列定义
const laborDemandColumns = [
    {
        title: '工种',
        dataIndex: 'jobCategory',
        key: 'jobCategory',
        width: 100
    },
    {
        title: '数量',
        dataIndex: 'number',
        key: 'number',
        width: 80
    },
    {
        title: '名称',
        dataIndex: 'peopleName',
        key: 'peopleName',
        width: 150
    },
    {
        title: '作业地点和区段',
        key: 'workLocation',
        children: [
            {
                title: '是否供地',
                dataIndex: 'landSsupply',
                key: 'landSsupply',
                width: 100
            },
            {
                title: '未供地面积（亩）',
                dataIndex: 'unsuppliedArea',
                key: 'unsuppliedArea',
                width: 150
            }
        ]
    },
    {
        title: '用工计划',
        key: 'employmentPlan',
        children: [
            {
                title: '起始时间',
                dataIndex: 'beginTime',
                key: 'beginTime',
                width: 120
            },
            {
                title: '结束时间',
                dataIndex: 'endTime',
                key: 'endTime',
                width: 120
            },
            {
                title: '薪酬',
                dataIndex: 'compensation',
                key: 'compensation',
                width: 80
            }
        ]
    },
    {
        title: '需求备注',
        dataIndex: 'remarks',
        key: 'remarks',
        width: 150
    },
    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        width: 60,
        fixed: 'right'
    }
]

// 添加劳务需求行
const addLaborDemand = () => {
    const newKey = String(Date.now())
    modelRef.laborDemands.push({
        key: newKey,
        jobCategory: null,
        number: null,
        peopleName: null,
        landSsupply: null,
        unsuppliedArea: null,
        beginTime: null,
        endTime:null,
        compensation: null,
        remarks: null
    })
}

// 删除劳务需求行
const removeLaborDemand = (index: number) => {
    modelRef.laborDemands.splice(index, 1)
}

// 表单方法
const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef, {
    onValidate: (...args) => console.log(...args),
});

// 提交表单
const onSubmit = () => {
    validate()
        .then(() => {
            console.log(toRaw(modelRef));
            // 这里可以添加表单提交后的逻辑
        })
        .catch(err => {
            console.log('验证失败', err);
        });
};

// 暴露表单数据和验证方法给父组件
defineExpose({
    modelRef,
    validate,
    resetFields,
    onSubmit,
    
});

</script>
<style scoped lang="less">
@import "/@/design/reference/form.less";
</style>